<template>
  <el-form :inline="true" :model="searchData" class="demo-form-inline">
    <el-form-item label="关键字">
      <el-input v-model="searchData.keyword" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="关键字">
      <el-select
        v-model="searchData.sex"
        placeholder="请选择性别"
        style="width: 100px"
        clearable
      >
        <el-option label="男" :value="0" />
        <el-option label="女" :value="1" />
      </el-select>
    </el-form-item>

    <el-form-item label="开始时间">
      <el-date-picker
        v-model="searchData.startDate"
        type="datetime"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="请选择开始时间"
      />
    </el-form-item>
    <el-form-item label="截止时间">
      <el-date-picker
        v-model="searchData.endDate"
        type="datetime"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="请选择截至时间"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="loadList()">搜索</el-button>
    </el-form-item>
  </el-form>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="userId" label="用户Id" />
    <el-table-column prop="userName" label="登陆账号" />
    <el-table-column prop="nickName" label="真实姓名" />
    <el-table-column prop="sex" label="性别">
      <template #default="scope">
        <el-tag type="success" v-if="scope.row.sex == 0">男</el-tag>
        <el-tag type="danger" v-if="scope.row.sex == 1">女</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="userMobile" label="手机号" />
    <el-table-column prop="userStatus" label="状态">
      <template #default="scope">
        <el-tag v-if="scope.row.userStatus == 0">待审核</el-tag>
        <el-tag v-if="scope.row.userStatus == 1">审核通过</el-tag>
        <el-tag v-if="scope.row.userStatus == 2">审核驳回</el-tag>
      </template>
    </el-table-column>

    <el-table-column prop="reason" label="驳回原因" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" size="small" @click="onCheckUser(scope.row)"
          >审核</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="searchData.pageNum"
      v-model:page-size="searchData.pageSize"
      :page-sizes="[2, 3, 4, 5]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <div>
    <el-dialog v-model="dialogFormVisible" title="商户审核" width="500">
      <el-form :model="form">
        <el-form-item label="登陆账号" :label-width="formLabelWidth">
          <el-input v-model="form.userName" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="form.sex" placeholder="请选择性别" disabled>
            <el-option label="男" :value="0" />
            <el-option label="女" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核" :label-width="formLabelWidth">
          <el-switch
            v-model="form.userStatus"
            active-text="审核通过"
            inactive-text="审核驳回"
            :active-value="1"
            :inactive-value="2"
          />
        </el-form-item>

        <el-form-item label="驳回原因" :label-width="formLabelWidth">
          <el-input v-model="form.reason" autocomplete="off" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">放弃</el-button>
          <el-button type="primary" @click="onSubmitCheckUser">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
  getUserList,
  updateUser,
  deleteUserById,
  deleteUserAll,
  checkUser,
} from "../api/api";
import { ElMessage, ElMessageBox } from "element-plus";
import { load } from "@amap/amap-jsapi-loader";
const tableData = ref([]);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const headers = ref({
  token: window.sessionStorage.getItem("token") || "",
});
const form = ref({
  createTime: "",
  nickName: "",
  reason: "",
  sex: 0,
  token: "",
  userAvatar: "",
  userEmail: "",
  userId: 0,
  userMobile: "",
  userName: "",
  userPass: "",
  userStatus: 0,
});
const total = ref(0);
const searchData = ref({
  pageNum: 1,
  pageSize: 2,
  keyword: "",
  sex: null,
  startDate: null,
  endDate: null,
});
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";
const multipleSelection = ref<any[]>([]);
const imageUrl = ref("");
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val;
};

const onCheckUser = (row: any) => {
  console.log("onCheckUser");
  Object.assign(form.value, row);
  dialogFormVisible.value = true;
};
const onSubmitCheckUser = () => {
  if (form.value.userStatus == 2) {
    if (form.value.reason == null || form.value.reason == "") {
      ElMessage.error("请填写驳回原因");
      return;
    }
  }
  checkUser(form.value).then((res) => {
    console.log(res);
    if (res.data.code == 200) {
      ElMessage.success("审核成功");
      dialogFormVisible.value = false;
      loadList();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

const loadList = () => {
  getUserList(searchData.value).then((res) => {
    if (res.data.code == 200) {
      tableData.value = res.data.data.records;
      total.value = res.data.data.total;
    }
  });
};

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  searchData.value.pageSize = val;
  loadList();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  searchData.value.pageNum = val;
  loadList();
};
loadList();
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
